{% extends "pcweb/base.html" %}

{% load static %}
{% load jsonify %}


{% block page_body %}
<link href="{{ js_config.js_lib.element_css }}" rel="stylesheet">
<link href="{{ js_config.js_lib.animate_css }}" rel="stylesheet">
<script src="{{ js_config.js_lib.element }}"></script>
<script src="{{ js_config.js_lib.layer }}"></script>
<script src="{{ js_config.js_lib.velocity }}"></script>
<script src="{{ js_config.js_lib.wow }}"></script>
<script src="{{ js_config.js_lib.pcweb }}"></script>

<script>
    head_bar_data = {{ head_bar_data | jsonify}}
    navibar={{ navibar | jsonify }}
    menu={{ menu | jsonify }}
    tops= {{ tops | jsonify }}
    footer = {{ footer | jsonify | default:'{}' }}

    root_store = new Vue({})
    root_store.menu = menu
    root_store.footer = footer

    $(function(){
        live_root_store =  new Vue({
            data(){
                return {
                    option:{},
                }
            }
        })

        live_root=new Vue({
            el:'#main-panel',
            data: function(){
                var self =this
                var childStore =live_root_store
                childStore.vc = this
                window.rootParStore=childStore
                return {
                    childStore:childStore,
                    head_bar_data:head_bar_data,
                    navibar:navibar,
                    menu:menu,
                    tops:tops,
                    footer:footer,
                }
            },
            components:{},
            created(){

            },
            computed:{

            },
            methods:{
            }
        })

        Vue.nextTick(function(){
            new WOW().init();
            cfg.updateSizeConfig()
            update_size()
        })
        function update_size(){
            var height = $(window).innerHeight() - $('.footer').height() - $('.header-bar').height()
            $(' #main-panel>.content').css('min-height',height + 'px')
        }
        window.addEventListener('resize', update_size)
    })


</script>
<style>
    body{
        font-size: 1.3rem;
    }
    #main-panel{
        position: relative;
        width: 100%;
    }
    /*#main-panel>.content{*/
        /*min-height: calc( var(--win-height) - 200px - 66px);*/
    /*}*/

    .seo-link{
        position:absolute;
        height:0;
        width:0;
        overflow:hidden;
    }
</style>
<div id="main-panel">
    <div class='navi seo-link'>
    {% for item in seo_url %}
      <a href="{{ item.url }}">{{ item.label }}</a>
    {% endfor %}</div>
    <component class="header-bar" :is="navibar.editor" :ctx="navibar"></component>
    <!--<com-xiu-menu></com-xiu-menu>-->

    <div class="content" :class="{has_navibar:navibar.editor}">
        <component v-for="top in tops" :is="top.editor" :ctx="top"></component>
    </div>

    <!--<transition :name="tranName" @after-enter="onEnter">-->
        <!--<keep-alive :include="alive_list">-->
            <!--<component ref="crt_com" class="child-view" :is="current_com.editor" :ctx="current_com.ctx" ></component>-->
        <!--</keep-alive>-->
    <!--</transition>-->

    <div class="footer">
        <component :is="footer.editor" :ctx="footer"></component>
    </div>

</div>

{% block page_content %}

{% endblock %}

{% endblock %}